<template>
	<div
		class="card-item-wrapper"
		v-for="item in infoList"
		:key="item"
		:style="{
			...getCardItemStyle(),
		}"
	>
		<div class="card-item">
			<div class="card-item-head">
				<div class="head-name">{{ item.label }}</div>
			</div>
			<div class="card-item-body">
				<div class="term-count">
					<span :title="item.value" @click="emitCountClick(item)">{{ item.value }}</span>
				</div>
				<div class="term-icon">
					<rk-icon
						:icon-style="{
							width: '18px',
							height: '18px',
						}"
						:icon-class="item.icon"
					/>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
const props = defineProps({
	// 面板背景颜色
	bgColor: { type: [String, Array] },
	// 面板头部名称
	headName: { type: String },
	// 面板头部图标
	headIcon: { type: String },
	// 图标的宽度
	iconWidth: { type: String, default: '1.5em' },
	// 图标的高度
	iconHeight: { type: String, default: '1.5em' },
	// 选项内容
	infoList: {
		type: Array,
		default: () => {
			return [];
		},
	},
	// 是否自动渲染块的颜色
	autoColor: { type: Boolean, default: true },
	// 自定义样式
	cardItemStyle: { type: [String, Object] },
});

const emits = defineEmits(['countClick']);
const emitCountClick = (info) => {
	emits('countClick', info);
};

const getCardItemStyle = () => {
	const { cardItemStyle } = props;
	let style = {};
	if (cardItemStyle) {
		style = { ...cardItemStyle };
	}
	return style;
};
</script>

<style lang="scss" scoped>
.card-item-wrapper {
	flex: 1;
	padding: 0 5px;
	// width: calc(100% / 3);
	&:nth-child(1) {
		.card-item {
			background: linear-gradient(90deg, #ef9b5f, #ebb980);
		}
		.term-icon {
			color: #ef9b5f;
		}
	}
	&:nth-child(2) {
		.card-item {
			background: linear-gradient(90deg, #759de7, #4e88f3);
		}
		.term-icon {
			color: #759de7;
		}
	}
	&:nth-child(3) {
		.card-item {
			background: linear-gradient(90deg, #14d494, #3dadf6);
		}
		.term-icon {
			color: #3dadf6;
		}
	}
	&:nth-child(4) {
		.card-item {
			background: linear-gradient(90deg, #ea677c, #ef9b5f);
		}
		.term-icon {
			color: #ea677c;
		}
	}
}
.card-item {
	padding: 15px;
	color: #fff;
	border-radius: 5px;
	background: #fafafa;
	&:hover {
		-webkit-box-shadow: 3px 5px 15px rgba(40, 40, 40, 0.36);
		box-shadow: 3px 5px 15px rgba(40, 40, 40, 0.36);
	}
	&-head {
		padding: 0 8px;
		.head-icon {
			display: flex;
			margin-right: 8px;
		}
		.head-name {
			font-size: 16px;
			font-weight: 600;
		}
	}
	&-body {
		display: flex;
		padding-top: 10px;
		.term-icon {
			margin-left: auto;
			width: 60px;
			height: 60px;
			line-height: 60px;
			color: var(--el-color-primary);
			text-align: center;
			background: var(--el-color-primary-light-9);
			border-radius: 50%;
		}
		.term-count {
			flex: 1;
			font-size: 32px;
			max-width: 100px;
			display: flex;
			align-items: center;
			margin-left: 15px;
			cursor: pointer;
			span {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				&:hover {
					text-decoration: underline;
				}
			}
		}
	}
}
</style>
